<template>
  <div>
    <my-form-drawer :title="title" :width="450" :visible="visible" @ok="edit" @cancel="onClose">
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="登录账号" prop="username">
          <a-input v-model="form.username" />
        </a-form-model-item>
        <!-- <a-form-model-item label="所属机构" prop="orgId">
          <a-select v-model="form.orgId">
            <a-select-option :key="item.id" v-for="item in orgList">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item> -->
        <a-form-model-item label="姓名" prop="realName">
          <a-input v-model="form.realName" />
        </a-form-model-item>
        <a-form-model-item label="组织架构" prop="orgId" v-show="!(type === 1 && form.id === orgTree[0].id)">
          <!-- <a-input v-model="form.pName" /> -->
          <my-tree-select ref="myTree" :tree-data="orgTree" :value="treeValue" :replaceFields="replaceFields" @selectChange="selectChange" />
        </a-form-model-item>
        <a-form-model-item label="账号状态" prop="enabled">
          <a-radio-group v-model="form.enabled">
            <a-radio :key="item.value" :value="item.value" v-for="item in enabledArr">{{ item.label }}</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="手机" prop="phone">
          <a-input v-model="form.phone" />
        </a-form-model-item>
        <!-- <a-form-model-item label="邮箱" prop="email">
          <a-input v-model="form.email" />
        </a-form-model-item> -->
      </a-form-model>
    </my-form-drawer>
  </div>
</template>

<script>
import moment from 'moment';
import { rule } from '@/utils/validateRules';
import { add, update } from '@/services/user';
import { list } from '@/services/organization';
import { getOrgByUser } from '@/services/org';
import MyFormDrawer from '@/components/drawer/MyFormDrawer';
import myTreeSelect from '../components/myTreeSelect';
import { list2Tree } from '../../utils/common';

export default {
  name: 'UserForm',
  components: { MyFormDrawer, myTreeSelect },
  data() {
    return {
      type: '0', //0添加，1编辑
      title: '',
      treeValue: undefined,
      orgTree: [],
      form: {
        username: '',
        orgId: '',
        realName: '',
        enabled: 1,
        endTime: '',
        gender: '1',
        position: '',
        birthday: '',
        phone: '',
        email: '',
        id: ''
      },
      replaceFields: {
        children: 'children',
        title: 'name',
        key: 'id',
        value: 'id',
      },
      visible: false,
      rules: {
        username: [
          { required: true, message: '账号不能为空', trigger: 'change' },
          { min: 3, message: '账号长度不能小于3位', trigger: 'change' },
          { validator: rule.validatorAccountCn, trigger: 'change' },
        ],
        // orgId: [{ required: true, message: "所属机构必选", trigger: "blur" }],
        realName: [
          { required: true, message: '姓名不能为空', trigger: 'change' },
          { validator: rule.validatorNameCn, trigger: 'change' },
        ],
        state: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
        // endTime: [
        //   { required: true, message: "有效期不能为空", trigger: "change" },
        // ],
        phone: [{ validator: rule.validatorIsMobile, trigger: 'change' }],
        email: [
          { required: false, trigger: 'change' },
          { validator: rule.validatorIsEmail, trigger: 'change' },
        ],
        orgId: [{ required: true, message: '组织架构不能为空', trigger: 'blur' }],
      },
      enabledArr: [
        { value: 1, label: '正常' },
        { value: 0, label: '锁定' },
      ],
      page: {
        currentPage: 1,
        pageSize: 10,
      },
      orgList: [],
    };
  },
  computed: {},
  created() {
    this.getOrgList(this.page);
    this.getOrgAll();
    this.$bus.$on('userVisible', (val) => {
      this.treeValue = undefined;
      this.visible = val.state;
      this.type = val.action;
      this.title = this.type ? '编辑用户' : '新增用户';
      if (this.type) {
        console.log(val.data);
        this.treeValue = val.data.orgId;
        this.form = val.data;
        this.form.enabled = this.form.enabled ? 1 : 0;
      }
    });
  },
  destroyed() {
    this.$bus.$off('userVisible');
  },
  methods: {
    moment,
    initData() {
      this.form = {
        username: '',
        organId: '',
        realrName: '',
        enabled: 1,
        endTime: '',
        gender: '1',
        position: '',
        birthday: '',
        phone: '',
        email: '',
      };
    },
    onClose() {
      this.visible = false;
      this.$refs['form'].clearValidate();
      this.initData();
      this.$emit('getList');
    },
    selectChange(value) {
      this.form.orgId = value;
      this.treeValue = value;
    },
    getOrgAll() {
      getOrgByUser().then((res) => {
        if (res.data.code === 0) {
          this.orgTree = list2Tree(res.data.data);
        }
      });
    },
    edit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (this.type) {
          update(this.form).then((res) => {
            console.log(res);
            if (res.data.code === 0) {
              this.$message.success('修改成功');
              this.visible = false;
              this.$refs['form'].clearValidate();
              this.initData();
              this.$emit('getList');
            }
          });
        } else {
          add(this.form).then((res) => {
            console.log(res);
            if (res.data.code === 0) {
              this.$message.success('添加成功');
              this.visible = false;
              this.$refs['form'].clearValidate();
              this.initData();
              this.$emit('getList');
            }
          });
        }
      });
    },
    getOrgList(page, params) {
      list(
        Object.assign(
          {
            page: page.currentPage,
            pageSize: page.pageSize,
          },
          params
        )
      ).then((res) => {
        if (res.data.code == 0) {
          console.log(res.data.data.list);
          this.orgList = res.data.data.list;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
